/** * Create by mzq * Description: 每周激活设备数量 * Date: 2024/9/14 09:48 * Update: 2024/9/14
09:48 */
<template>
  <div class="NumberWeeklyActivationsBg">
    <div class="title">每周激活设备数量</div>

    <div id="NumberWeeklyActivationsLine"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  data: Object
})

// 月份数组
const monthsArr = ref([])
// 数据Arr
const numberArr = ref([])

let init = () => {
  let myChart = echarts.init(document.getElementById('NumberWeeklyActivationsLine'))
  let options = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '5%',
      left: '0',
      right: '0',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      data: monthsArr.value
    },
    yAxis: {
      type: 'value',
      lineStyle: {
        color: '#fff'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'transparent'
        }
      }
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        symbol: 'none',
        data: numberArr.value,
        markPoint: {
          data: [
            {
              type: 'max',
              symbol: 'pin',
              label: {
                show: true,
                formatter: '{c}'
              }
            }
          ],
          symbolSize: [0, 0],
          symbolOffset: [0, -40]
        },
        itemStyle: {
          color: '#FBC900'
        }
      }
    ]
  }
  myChart.setOption(options, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

watch(
  () => props.data,
  (val) => {

    // 获取前6个月的月份
    function getLast7Months() {
      const now = new Date()
      const months = []
      for (let i = 0; i < 6; i++) {
        const month = now.getMonth() - i // 获取当前月份减去i个月
        months.push(`${month < 10 ? '0' : ''}${month + 1}月`) // 构造月份字符串并添加到数组前面
      }
      return months
    }

    monthsArr.value = getLast7Months()

    numberArr.value = val.monthlyDeviceCnt

    init()
  }
)

</script>
<style scoped lang="scss">
.NumberWeeklyActivationsBg {
  width: 0.7865rem /* 151/192 */;
  height: 0.5677rem /* 109/192 */;
  background: url('@/image/bg5.png') no-repeat;
  background-size: 100% 100%;

  .title {
    margin-top: 0.0521rem /* 10/192 */;
    margin-left: 0.0625rem /* 12/192 */;
    color: white;
    font-size: 0.0417rem /* 8/192 */;
  }

  #NumberWeeklyActivationsLine {
    width: 0.7292rem /* 140/192 */;
    height: 0.4375rem /* 84/192 */;
  }
}
</style>
